<template>
  <div>
    <div class="log">
      <div class="header">
        <el-table :data="logformData" size="mini">
          <el-table-column prop="id" label="序号"> </el-table-column>
          <el-table-column prop="realname" label="访问人真实姓名">
          </el-table-column>
          <el-table-column prop="method" label="访问方式"> </el-table-column>
          <el-table-column prop="content" label="访问路径"> </el-table-column>
          <el-table-column label="访问时间">
            <template slot-scope="scope">
              {{moment(scope.row.logTime).format("YYYY-MM-DD HH:mm:SS")}}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="paginetion">
        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "../../utils/request";
import { mapActions, mapState } from "vuex";
import moment from 'moment'
export default {
  data() {
    return {
      logformData: [],
      total: 10,
      pageSize: 20,
      currentPage: 1,
    };
  },
  computed: {
    ...mapState("log", ["logData"]),
  },
  methods: {
    moment,
    ...mapActions("log", ["getAlllogData"]),
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val;
      // 将当前的页数 重置到第一页
      this.currentPage = 1;
      // 重新调用获取所有产品数据的方法
      this.getAllProductData();
    },

    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val;
      // 重新调用获取所有产品数据的方法
      this.getAllProductData();
    },

    //获取页面数据
    async getAllProductData() {
      // 获取参数
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      // 通过对应的参数发送网络请求 获取产品数组数据
      let res = await get("/baseLog/pageQuery", {
        ...data,
        ...this.queryData,
      });
      // 将data中的产品数组 进行赋值

      this.logformData = res.data.list;
      // // 页面总数据条数 赋值
      this.total = res.data.total;
    },

    FinelogData() {
      let data = {
        page: 1,
        pageSize: 8,
      };
      this.getAlllogData(data);
    },
  },
  created() {
    this.FinelogData();
    //页面数据
    this.getAllProductData();
  },
  mounted() {},
};
</script>
<style scoped>
.paginetion {
  float: right;
  margin-top: 20px;
}
</style>
